<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
    </div>
    <div id="app">
    </div>
    <script>
        let box = document.getElementById('box')
        let app = document.getElementById('app')
        //现在时间
        function lock() {
            let data = new Date()
            //获取年
            let Y = data.getFullYear()
            //获取月
            let M = data.getMonth() + 1
            //获取日
            let D = data.getDate()
            //获取小时
            let h = data.getHours()
            //获取分钟
            let m = data.getMinutes()
            //获取秒
            let s = data.getSeconds()

            M < 10 ? M = '0' + M : M
            D < 10 ? D = '0' + D : D
            h < 10 ? h = '0' + h : h
            m < 10 ? m = '0' + m : m
            s < 10 ? s = '0' + s : s
            //字符串拼接
            box.innerText = '北京时间:' + Y + '年' + M + '月' + D + '日 ' + h + ':' + m + ':' + s
        }
        //倒计时

        let endTime = "2020/10/1"
        let endTimeS=new Date(endTime)

        function countDown() {
            let data = new Date()
            var second = parseInt((endTimeS.getTime() - data.getTime()) / 1000); //需要倒计时的时间
            var day = parseInt(second / 3600 / 24); //天数
            var hour = parseInt(second / 3600 % 24); //时
            var minute = parseInt(second / 60 % 60); //分
            var s = parseInt(second % 60); //秒

            // 三目运算添加10以下数字前面的 0 
            day < 10 ? day = "0" + day : day;
            hour < 10 ? hour = "0" + hour : hour;
            minute < 10 ? minute = "0" + minute : minute;
            s < 10 ? s = "0" + s : s;

            app.innerHTML = "距离"+endTime+'还有' + day + "天 " + hour + "小时 " + minute + "分钟 " + s + "秒"


        }
        setInterval(() => {
            countDown()
        }, 1000);
        //设置定时器每秒调用函数更新最新时间
        setInterval(() => {
            lock()
        }, 1000);
    </script>
</body>

</html>